<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="报表详细" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view class="report-list header">
			<view class="r-list-item">
				<view class="item-o">注单号</view>
				<view class="item-t">类型</view>
				<view class="item-th">玩法</view>
				<view class="item-four">下注</view>
				<view class="item-five">输赢</view>
			</view>
		</view>
		<view class="report-list" v-if="!isT">
			<view class="r-list-item online" v-for="(item, index) in dataList" :key="index">
				<view class="item-o">
					<text class="text-blue">{{ ordernodeal(item.show_id, dealDate) }}</text>
					<text>{{ datestr(item.created) }}</text>
					<text>{{ datestr(item.created, 't') }}</text>
				</view>
				<view class="item-t">
					<text>{{ item.toplotname }}</text>
					<text class="text-blue">第{{ item.cycleid }}期</text>
					<text class="text-blue">盘口{{ item.region }}</text>
				</view>
				<view class="item-th">
					<view class="lotname-v">
						<text class="text-blue" v-if="!empty(item.lotname)">{{ item.lotname }}/</text>
						<rich-text class="text-blue" :nodes="item.depiction"></rich-text>
						<text class="text-blue">@</text>
					</view>
					<view>
						<text class="text-red">{{ item.rate }}</text>
					</view>
				</view>
				<view class="item-four">{{ decimal(item.cash) }}</view>
				<view class="item-five" :class="{ gree: !isnegative(item.result2), red: isnegative(item.result2) }">{{ decimal(item.result2) }}</view>
			</view>
			<text class="loading-text">{{ loadingType === 0 ? contentText.contentdown : loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore }}</text>
		</view>
		<view class="report-list" v-if="isT">
			<view class="r-list-item online" v-for="(item, index) in thirdList" :key="index">
				<view class="item-o">
					<text class="text-blue">{{ ordernodeal(item.third_bet_id, dealDate) }}</text>
					<text>{{ datestr(item.created) }}</text>
					<text>{{ datestr(item.created, 't') }}</text>
				</view>
				<view class="item-t">
					<text>{{ item.third_game_name }}</text>
				</view>
				<view class="item-th">
					<view class="lotname-v">
						<rich-text class="text-blue" :nodes="item.third_bet_content"></rich-text>
					</view>
				</view>
				<view class="item-four">{{ decimal(item.third_bet_amount) }}</view>
				<view class="item-five" :class="{ gree: !isnegative(item.third_win_loss), red: isnegative(item.third_win_loss) }">{{ decimal(item.third_win_loss) }}</view>
			</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: {
		Tabbar,
		navigation
	},
	data() {
		return {
			sdate: '',
			dealDate: '', //处理后的日期格式 2019-05-20为190520
			dataList: [],

			//加载更多的相关属性
			pageNum: 1, //页码
			loadingType: 0,
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},

			isT: false, //是否第三方的显示数据
			thirdList: []
		};
	},
	onLoad(option) {
		let tempP = Tools.paramAESDecrypt(decodeURIComponent(option.p));
		if (Tools.isEmpty(tempP)) {
			VueTools.toastNo('非法操作,请返回重试');
			return;
		} else {
			let paramsObj = JSON.parse(tempP);
			this.sdate = paramsObj.sdate;
			this.dealDate = this.sdate.substr(2).replace(/-/g, '');
			if (paramsObj.t == true || paramsObj.t == 'true') {
				//有第三方
				this.isT = true;
				this.getThirdReportData(paramsObj.pid, paramsObj.sdate);
			} else {
				this.isT = false;
				this.lementNet();
			}
		}
	},
	methods: {
		lementNet(isMore = false) {
			let that = this;
			let obj = '{"is_hit":"' + 1 + '","page":"' + this.pageNum + '","pageSize":"20","sdate":"' + this.sdate + '"}';
			Net.ayiHttp(
				URL.LOTSGAM_ORDERDETAIL,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let tt = Tools.aesDecodeToJson(res.data);
						if (isMore) {
							//上拉更多
							that.dataList = that.dataList.concat(tt.list);
							that.loadingType = 0;
							if (tt.list.length < 20) {
								//停止加载更多的处理
								that.loadingType = 2;
								return;
							}
						} else {
							//第一次进入
							that.dataList = tt.list;
							if (tt.list.length < 20) {
								//停止加载更多的处理
							} else {
								//可以加载更多
							}
						}
						console.log(tt);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
					uni.stopPullDownRefresh();
				},
				function(err) {
					console.log('error:', err);
					uni.stopPullDownRefresh();
				}
			);
		},
		/**
		 * 有第三方报表信息的处理
		 */
		getThirdReportData(platformId, date) {
			if (Tools.isEmpty(platformId)) {
				return;
			}
			let that = this;
			let obj = '{"platformId":"' + platformId + '","date":"' + date + '"}';
			Net.ayiHttp(
				URL.THIRD_REPORTINFO,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('详细的数据列表============', data);
						that.thirdList = data;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 订单中里面的时间给剔除
		 */
		ordernodeal(value, date) {
			let args = date.substr(2) + '';
			args = args.replace(/-/g, '');
			let reg = new RegExp(args, 'g');
			return value.replace(reg, '');
		},
		onReachBottom() {
			if (!this.isT) {
				if (this.loadingType != 0) {
					return;
				}
				this.loadingType = 1;
				this.pageNum++;
				this.lementNet(true);
			} else {
				uni.stopPullDownRefresh();
			}
		},
		onPullDownRefresh() {
			if (!this.isT) {
				this.loadingType = 0;
				this.pageNum = 1;
				this.lementNet();
			}
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.header {
	font-size: 24rpx;
	color: #666;
	background: #fff;
	border-bottom: 1px solid #a4a4a4;
	.r-list-item {
		height: 80rpx;
		font-size: 24rpx;
		padding: 0rpx;
	}
}
.r-list-item {
	display: flex;
	flex-direction: row;
	text-align: center;
	align-items: center;
	font-size: 20rpx;
	padding: 8rpx 0rpx;
	&.online {
		border-bottom: 1px solid #e8e9ec;
	}
	.item-o {
		width: 187.5rpx;
		padding: 0px 8rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
	}
	.item-t {
		width: 187.5rpx;
		padding: 0px 8rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
	}
	.item-th {
		width: 125rpx;
		padding: 0px 8rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
	}
	.item-four {
		width: 125rpx;
		padding: 0px 8rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
	}
	.item-five {
		width: 125rpx;
		padding: 0px 8rpx;
		display: flex;
		flex-direction: column;
		text-align: center;
		word-wrap: break-word;
		word-break: break-all;
	}
}
.loading-text {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.text-blue {
	color: #1749af;
}
.text-red {
	color: #ff6565;
}
//输赢值得颜色
.red {
	color: #ff0000;
}
.gree {
	color: #00cc00;
}
</style>
